By

文章目录

在最近做的weex小应用中因为用到很多图片，并且目前weex只支持在线的图片加载，所以想使用css Sprite来拼接图片减少http请求数量，加速内容显示。但在使用css Sprite 时 发现在android 端并不支持background-image 与background-position.

  1. 应用场景
    (1) 静态图片，不随用户信息的变化而变化
    (2) 小图片，图片容量比较小
    (3) 加载量比较大
    (4) 大图、动图、字体图标最好不拼成雪碧图

    可以有效的减少http请求数量，加速内容显示。

  2. 实现方式
    小网站： ps 手动拼图 -> 用鼠标控制像素并记录图片坐标点
    大网站： 使用是sprite 工具自动生成：CssGaga
    CssGaga配置

  3. 在线转换 CSS Sprite Generator
    我个人觉得这个网站简直不能太好用了，就是需要翻墙，条件允许就用这个就好了。

  4. 使用方式
    通过 css background-position属性进行定位。
    对于一张雪碧图，以左上角为原点，取图为图标左上角的偏移，并且为负值。
    雪碧图定位

  5. 栗子
    用上面的网址进行生成雪碧图后就可以得到对应于图片位置的css文件，根据文件就可以进行使用了。
    使用的雪碧图是对应的css文件是 spritecss 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .sprite-carousel1 {
        width: 454px;
        height: 262px;
        background-position: -5px -5px;
    }
    .sprite-carousel2 {
        width: 454px;
        height: 262px;
        background-position: -5px -277px;
    }
    .sprite-carousel3 {
        width: 467px;
        height: 237px;
        background-position: -5px -549px;
    }

所以使用方法就是 background-image + background-position 就可以使用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        li i {
            background-image: url("imgs/home/home.png");
            display: block;
        }
        .img-1 {
            width: 454px;
            height: 262px;
            background-position: -5px -5px;
        }
        .img-2 {
            width: 454px;
            height: 262px;
            background-position: -5px -277px;
        }
        .img-3 {
            width: 467px;
            height: 237px;
            background-position: -5px -549px;
        }
    </style>
</head>
<body>
    <ul>
        <li><i class="img-1"></i></li>
        <li><i class="img-2"></i></li>
        <li><i class="img-3"></i></li>
    </ul>
</body>
</html>

文章目录